<template>
  <el-dialog class="goods-edit" :visible.sync="isShow" :before-close="handleCancelModal" :close-on-click-modal="false" :show-close="false" width="530px">
    <template>
      <div v-if="mode === 'batch'" slot="title">
        <div class="color-routine" style="font-size: 14px;text-align: center;font-weight: bold;">你正要为勾选的{{ option.selected.length }}种标品进行批量的属性修改，请谨慎操作</div>
        <div class="color-routine" style="text-align: center;font-size: 12px;margin-top: 8px">不输入新内容则将保持原来的属性</div>
      </div>
      <div v-else slot="title">
        <div class="color-routine" style="font-size: 14px;text-align: center;font-weight: bold;">你正要修改编号为{{ itemData.goods_code }}的标品</div>
      </div>
      <!-- 数据表单 -->
      <el-form ref="formParams" :model="formParams" label-position="left" label-width="110px" size="small" style="padding: 0 30px">
        <div class="partition-container">
          <div class="partition-left">
            <el-form-item v-if="mode === 'single'" label="图片" prop="created_at" style="margin-bottom: 5px;">
              <el-upload
                class="images-uploader"
                action="/file/upload"
                list-type="picture-card"
                multiple
                :limit="9"
                :file-list="images"
                :on-remove="handleRemoveImage"
                :on-success="handleSuccessImage"
                :on-exceed="handleExceedImage"
              >
                <i slot="trigger" class="el-icon-plus" />
                <!-- <div class="el-upload el-upload--picture-card" style="display: inline-block" @click="showCamera = true">
                  <i slot="trigger" class="el-icon-camera" />
                </div> -->
              </el-upload>
            </el-form-item>

            <el-form-item label="上架时间" prop="released_at">
              <el-date-picker v-model="formParams.released_at" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择日期时间" style="width: 100%" />
            </el-form-item>

            <el-form-item prop="goods_name" label="聚星字号">
              <el-input v-model="formParams.goods_name" placeholder="请输入更改后的聚星字号" />
            </el-form-item>

            <el-form-item prop="description" label="标品介绍">
              <el-input v-model="formParams.description" class="not-resize" placeholder="请输入更改后的标品介绍" type="textarea" show-word-limit rows="2" />
            </el-form-item>

            <el-form-item prop="is_show" label="是否展示">
              <el-radio-group v-model="formParams.is_show" size="mini">
                <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
                <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="is_bid" label="是否参与投标">
              <el-radio-group v-model="formParams.is_bid" size="mini">
                <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
                <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="is_onshelf" label="是否上架">
              <el-radio-group v-model="formParams.is_onshelf" size="mini">
                <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
                <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="remarks" label="标品备注">
              <el-input v-model="formParams.remarks" placeholder="请输入更改后的标品备注" />
            </el-form-item>

            <el-form-item prop="weight" label="标品重量">
              <el-input v-model="formParams.weight" placeholder="请输入更改后的标品重量" />
            </el-form-item>

            <el-form-item prop="label_price" label="底价">
              <el-input v-model="formParams.label_price" placeholder="请输入更改后的底价" />
            </el-form-item>

            <el-form-item prop="cost_price" label="成本价">
              <el-input v-model="formParams.cost_price" placeholder="请输入更改后的成本价" />
            </el-form-item>

            <el-form-item prop="supplier_id" label="货主">
              <el-select v-model="formParams.supplier_id" placeholder="请选择更改后的商品货主" clearable>
                <el-option v-for="item in option.supplierList" :key="item.supplier_id" :label="item.name" :value="item.supplier_id" />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </template>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :disabled="isSubmit" @click="handleCancelModal">取 消</el-button>
      <el-button type="primary" size="small" :loading="isSubmit" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateAll, updateGoods } from '@/api/goods'
import { fileUrl } from '@/utils/tools'

export default {
  props: {
    'isShow': { type: Boolean, default: true },
    'mode': { type: String, default: null },
    'count': { type: Number, default: null },
    'itemData': { type: Object, default: null },
    'option': { type: Object, default: null }
  },
  data: function() {
    return {
      isSubmit: false,
      images: [],
      formParams: {
        goods_id: null,
        images: [],
        released_at: null,
        goods_name: null,
        description: null,
        weight: null,
        size: null,
        supplier_id: null,
        remarks: null,
        stock: null,
        cost_price: null,
        label_price: null,
        is_show: null,
        is_bid: null,
        is_onshelf: null
      }
    }
  },
  mounted() {
    if (this.itemData) {
      for (const key in this.formParams) {
        if (key === 'supplier_id') {
          this.formParams.supplier_id = this.itemData.supplier ? this.itemData.supplier.supplier_id : null
        } else if (key === 'images') {
          this.images = this.itemData.images.map(e => {
            return { name: e.path, url: fileUrl(e.path, 2) }
          })
        } else {
          this.formParams[key] = this.itemData[key]
        }
      }
    }
  },
  methods: {
    handleSubmitForm() {
      this.isSubmit = true
      let method = updateAll
      const params = { ...this.formParams }
      if (this.mode === 'single') {
        method = updateGoods
        params.images = this.images.map(e => e.name)
        delete params.stock
      } else {
        params.goods_ids = this.option.selected
      }
      method(params).then(() => {
        this.isSubmit = false
        this.handleCancelModal(true)
      }).catch(() => {
        this.isSubmit = false
      })
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', 'showModal', refresh)
      }
    },
    handleRemoveImage: function(file, fileList) {
      this.images = fileList
    },
    handleSuccessImage: function(response, file, fileList) {
      file.name = response.data[0]
      this.images = fileList
      return response
    },
    handleExceedImage: function() {
      this.$message.warning('最多只能上传9张图片')
    }
  }
}
</script>

<style lang="scss">
.goods-edit {
  .el-dialog__body {
    padding: 5px 10px;
  }
}

.images-uploader {
  margin-right: -8px;

  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 104px;
    margin-right: 10px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
}
</style>

<style lang="scss" scoped>

.partition-right {
  width: 200px;
  height: 262px;
  .rule-main {
    height: 227px;
  }
}
.split {
  width: 100%;
  display: flex;
  .split-left {
    flex-grow: 1;
  }
}
</style>
